<!--  -->
<template>
	<el-dialog v-dialogDrag v-bind="$attrs" v-on="$listeners" width="400px" :title="title" append-to-body custom-class="limiter-setting-dialog" :before-close="handleClose">
		<div class="limiter-setting__container">
			<el-form ref="limiterFormRef" :model="config" label-position="top" size="small" class="config-setting__form">
				<el-form-item label="流量类型" prop="limiterType">
					<el-radio-group v-model="config.limiterType" size="mini" @change="handleLimiterTypeChange">
						<el-radio-button label="system">不限流量</el-radio-button>
						<el-radio-button label="time">时间窗口限流</el-radio-button>
						<el-radio-button label="token">令牌桶限流</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<template v-if="config.limiterType==='time'">
					<el-form-item label="速率 (次)" prop="rate">
						<el-input-number v-model="config.rate" controls-position="right" style="width:100%;"/>
					</el-form-item>
					<el-form-item label="时间窗口 (秒)" prop="rateInterval">
						<el-input-number v-model="config.rateInterval" controls-position="right" style="width:100%;" />
					</el-form-item>
				</template>
				<template v-if="config.limiterType==='token'">
					<el-form-item label="每秒产生的令牌数" prop="rate">
						<el-input-number v-model="config.rate" controls-position="right" style="width:100%;" />
					</el-form-item>
					<el-form-item label="令牌桶容量" prop="bucketCapacity">
						<el-input-number v-model="config.bucketCapacity" controls-position="right" style="width:100%;" />
					</el-form-item>
					<el-form-item label="请求消耗的令牌数" prop="requestedTokens">
						<el-input-number v-model="config.requestedTokens" controls-position="right" style="width:100%;" />
					</el-form-item>
				</template>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button size="small" type="" @click="handleClose">取消</el-button>
				<el-button size="small" type="primary" @click="handleSubmit" :loading="loading">确认</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import {updateTenantLimiter} from "@/api/system/tenantPackage/index";
const initForm = {
	packageId: undefined,
	limiterType: "time",
	rate: 0,
	rateInterval: 0,
	bucketCapacity: 0,
	requestedTokens: 0,
}
export default {
	name: "LimiterSetting",
	//import引入的组件需要注入到对象中才能使用
	components: {},
	props: {
		dataSource: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		//这里存放数据
		return {
			loading: false,
			title: "流量设置",
			config: {...initForm},
			rules: {
				limiterType: [{ required: true, message: "流量类型不能为空", trigger: "blur" }],
				rate: [{ required: true, message: "速率不能为空", trigger: "blur" }],
				rateInterval: [{ required: true, message: "时间窗口不能为空", trigger: "blur" }],
				bucketCapacity: [{ required: true, message: "令牌桶容量不能为空", trigger: "blur" }],
				requestedTokens: [{ required: true, message: "请求消耗的令牌数不能为空", trigger: "blur" }]
			}
		};
	},
	//监听属性 类似于data概念
	computed: {},
	//监控data中的数据变化
	watch: {
		dataSource: {
			handler(val) {
				if(val != null && val != undefined && Object.keys(val).length>0){
					this.title = `${val.packageName} - 流量配置`;
					Object.keys(this.config).forEach((key)=>{
						this.config[key] = val[key];
					});
				}
			},
			deep: true,
			immediate: true
		}
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {

	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {

	},
	beforeCreate() {}, //生命周期 - 创建之前
	//方法集合
	methods: {
		handleLimiterTypeChange(val){
			if(this.config.limiterType === "system"){
				this.config.rate = -1;
				this.config.rateInterval = -1;
				this.config.bucketCapacity= -1;
				this.config.requestedTokens= -1;
			}else if(this.config.limiterType === "time"){
				this.config.rate = 5;
				this.config.rateInterval = 10;
				this.config.bucketCapacity= 0;
				this.config.requestedTokens= 0;
			}else if(this.config.limiterType === "token"){
				this.config.rate = 5;
				this.config.rateInterval = 0;
				this.config.bucketCapacity= 100;
				this.config.requestedTokens= 1;
			}
		},
		// 表单重置
		reset() {
			this.config = { ...initForm },
			this.$refs.limiterFormRef && this.$refs.limiterFormRef.resetFields();
		},
		handleClose(done){
			this.reset();
			this.$emit("update:visible", false);
			this.$parent.getList();
			// done();
		},
		handleSubmit() {
			// this.$emit("updateConfig", this.config);
			// this.handleClose();
			this.$refs.limiterFormRef.validate((valid)=>{
				if(valid){
					this.loading = true
					updateTenantLimiter(this.config).then(res=>{
						this.$message.success("设置成功");
					}).finally(()=>{
						this.loading = false
						this.handleClose();
					})
				}else{
					return false;
				}
			})
		},
	},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
::v-deep .el-input-number .el-input__inner{
	text-align: left;
}
::v-deep .el-form-item__label{
	line-height: 14px;
}
</style>